<template>
  <div class="commoditydetail-box" >
    <div class="knife_container">
      <div class="breadcrumb"><a class="bread_a" @click="back">全部类目</a> <i class="el-icon-arrow-right"></i> 商品详情</div>
      <el-alert title="此商品没有一个规格" type="error" v-if="isOneType === 0"></el-alert>
      <div class="pro-choose-main pro-loading">
        <div class="pro-img-left">
          <div class="kn-large" >
            <div class="preview-box" @mousemove="move($event)" @mouseout="out" ref="previewBox">
              <img width="100%" ref="productImg" :src="prefixImg + currentImg" v-if="currentImg"/>
              <img width="100%" ref="productImg" :src="loadImg" v-else/>
              <div class="hover-box" ref="hoverBox" v-show="zoomVisiable"></div>
            </div>
            <div class="zoom-box" v-show="zoomVisiable" ref="zoomBox">
              <img :src="prefixImg + currentImg" ref="bigImg" v-if="currentImg"/>
              <img width="100%" ref="productImg" :src="loadImg" v-else/>
            </div>
          </div>
          <ul class="kn-thumb">
            <li class="kn-thumb-item" :class="{'activeThumb': activeIndex === imgIndex}" v-for="(imgItem, imgIndex) in skuDetail.imageList" :key="imgIndex"
             @mouseover="handleThumb($event, imgItem.image, imgIndex)">
              <img v-lazy="prefixImg + imgItem.image" :alt="imgItem.name" :title="imgItem.name"/>
            </li>
          </ul>
        </div>
        <!-- 商品右侧 活动库存售空后，货品将按原价出售-->
        <div class="pro-info-right">
          <p class="title">
            <span class="tagname vert-mid" v-show="skuDetail.brandName" :class="{'tagname-red': skuDetail.activity}">{{skuDetail.brandName}}</span>
            <span class="tagname" v-show="skuDetail.other" :class="{'tagname-red': skuDetail.activity}">{{skuDetail.other}}</span>
            <span class="pro-title">{{skuDetail.name}}</span>
            <span class="redCircle" v-if="skuDetail.activity">已参与活动</span>
          </p>
          <el-row class="mar-bt30">
            <el-col :span="24">
              <div class="pro-price-info">
                <p class="first">
                  <span class="s-pro-title">价格</span>
                  <template v-if="loginStatus === 1">
                    <span class="pro-price">
                     ￥{{skuDetail.priceLowerLimit| floatPrices}}
                     <template v-if="skuDetail.priceLowerLimit !== skuDetail.priceUpperLimit"> - {{skuDetail.priceUpperLimit | floatPrices}}</template>
                    </span>
                  </template>
                  <span class="pro-price smallfont" v-else-if="loginStatus === 4">登录后查看</span>
                  <span class="pro-price smallfont" v-else>审核通过后查看</span>
                </p>
                <p><span class="s-pro-title">发货</span><span class="vert-mid">由温岭总仓发货</span></p>
              </div>
            </el-col>
          </el-row>
          <div class="commodity-info">该商品支持退换货， 16点前下单当天发货</div>
          <div class="commodity-search">
            <span style="float: left">型号种类（共{{proSpecList.page.totalRecords}}种）</span>
            <i style="float: right" class="el-icon-search" v-if="totalpage > 1 || searchPro.name !== ''"></i>
            <input v-show="totalpage > 1 || searchPro.name !== ''" style="float: right" type="text" v-model="searchPro.name" placeholder="" @keydown.enter="serchPro"/>
            <span v-show="totalpage > 1 || searchPro.name !== ''" class="searchBtn" @click="serchPro" >搜索</span>
          </div>
          <div class="commodity-table">
            <el-table :data="proSpecList.list" fit width="980" header-row-class-name="font12" header-align="center" cell-class-name="active-tab" :border="false" >
              <el-table-column label="规格型号" align="center" width="260">
                <div class="color-org2" slot-scope="scope">
                  {{scope.row.detail}}
                </div>
              </el-table-column>

              <el-table-column label="价格" align="center" width="120">
                <div class="color-org2 " slot-scope="scope">
                  <template v-if="loginStatus === 1">
                    <span :class="{'pmtprice': scope.row.discountPrice > 0}" v-if="scope.row.discountPrice > 0">
                      ￥{{scope.row.discountPrice | floatPrices }}
                      <span class="oldprice">￥{{scope.row.price | floatPrices }}</span>
                    </span>
                    <span v-else> ￥{{scope.row.price | floatPrices }}</span>
                  </template>
                  <span v-else-if="loginStatus === 4">登录后查看</span>
                  <span v-else>审核通过后查看</span>
                </div>
              </el-table-column>

              <el-table-column label="库存数量" align="center" width="90">
                <template slot-scope="scope">
                  <div>
                    {{scope.row.stock}}
                  </div>
                </template>
              </el-table-column>
              <el-table-column label="库存咨询" align="center">
                <template slot-scope="scope">
                  <span v-if="scope.row.stock > 0">有货</span>
                  <div v-else>
                    <span
                      class="color-blue pointer"
                      @click.prevent="showConsult(scope.row)"
                      v-if="scope.row.consultStatus === 0"
                    >查询库存</span>
                    <span class="color-blue" v-else>{{scope.row.inventoryStatusDesc}}</span>
                  </div>
                </template>
              </el-table-column>
              <!--  :disabled="scope.row.inventoryStatus === 3" -->
              <el-table-column label="操作" prop="amount" align="center" width="110">
                <template slot-scope="scope">
                  <el-input-number
                  class="product-detail"
                  size="mini "
                  v-model="temporaryCart[scope.row.id].num"
                  :key="scope.row.id"
                  :min="0"
                  :max="scope.row.personalLimited ? scope.row.lastPersonalLimitNum : scope.row.maxNum"
                  :ref="'pro_' + scope.$index"
                  :step="scope.row.packingNum"
                  @change="limitProNum($event, scope.$index, scope.row.packingNum, scope.row)">
                  <!-- @change="debounceChangeProNum($event, index, item.packingNum, item)" -->
                  </el-input-number>
                </template>
              </el-table-column>
            </el-table>
            <!-- 分页 -->
            <el-row v-if="proSpecList.page && proSpecList.page.totalPages > 1">
              <el-pagination layout="total, prev, pager, next, ->" :page-size="searchPro.number" :current-page="searchPro.page" :total="proSpecList.page.totalRecords | parseIntType" @current-change="page" class="page_box"></el-pagination>
            </el-row>
          </div>
          <div class="temporaryCart-box">
            <span class="temporaryCart-total">{{temporaryCartSum.sum}}件</span>
            <span class="temporaryCart-total">{{loginStatus === 1 ? `${temporaryCartSum.price.toFixed(2)}元` : (loginStatus === 4 ? '登录后查看' : '审核通过后查看')}}</span>
            <el-popover
              v-model="popoverBool"
              width="524"
              placement="bottom-end"
              trigger="click">
              <el-table :data="temporaryCartArr" height="300" :show-header="false">
                <!-- <el-table-column width="150" property="id" label="id"></el-table-column> -->
                <el-table-column property="name" label="规格"></el-table-column>
                <el-table-column property="num" label="数量"></el-table-column>
                <el-table-column width="50" label="删除">
                  <template slot-scope="scope">
                    <i class="el-icon-circle-close" @click="delTemporaryCart(scope.row.id)"></i>
                    <!-- <el-button class="delTemporaryCart" @click="delTemporaryCart(scope.row.id)">删除</el-button> -->
                  </template>
                </el-table-column>
              </el-table>
              <span slot="reference" class="btn-temporaryCart">查看已选清单<i :class="[popoverBool? 'el-icon-arrow-down' : 'el-icon-arrow-up']"></i></span>
            </el-popover>
          </div>
          <div style="overflow:hidden">
            <button type="primary"
              :disabled="disabled_shop"
              @click="allAddToShop"
              class="btn-add-shopcart"
              :class="{'btn-not-allow': disabled_shop}"
              style="border: none;float:right;">
              <i class="iconfont el-icon-knife-shop_cart"></i> 加入采购清单
            </button>
          </div>
        </div>
      </div>
      <!-- 规格说明 /商品详情 -->
      <div class="commodity-content">
        <div class="commodity-desc">
          <div class="goods-detail-box">
            <div class="spe-tabs">
              <span class="active" @click="speVisi = false">商品详情</span>
            </div>
            <div v-html="skuDetail.detail"></div>
          </div>
          <div class="discount-box goods-detail-box" v-if="activityList.length > 0">
            <div class="spe-tabs">
              <span class="active">特惠产品</span>
            </div>
            <div>
              <ActiveProduct :productList="activityList" :itemSize="true"></ActiveProduct>
            </div>
          </div>
        </div>

        <div class="recomm-box">
          <div class="recomm-pro">
            <div class="recomm-pro-title">
              <span class="title">推荐产品</span>
            </div>
            <product :product="recommendList" v-if="recommendList.length > 0"></product>
            <div class="no-text" v-else>暂无推荐产品</div>
          </div>
        </div>
      </div>
      <!-- 咨询模块弹窗 -->
      <el-dialog :title="skuDetail.name" :visible.sync="consultVisible" width="320px" center top="20vh">
        <!-- 内部弹窗 -->
        <el-dialog :visible.sync="consultVisibleInner" width= "320px" center append-to-body>
          <!-- <span v-if="consultdata !== null">当前商品{{consultObj.name}}规格:{{stock[consultdata]}}</span>
          <span v-else>系统正在查询，您可以先浏览其他商品。</span> -->
          <span>{{consultdata}}</span>
          <span slot="footer" class="dialog-footer">
            <el-button type="primary" @click="hiddenDialog">确定</el-button>
          </span>
        </el-dialog>
        <div>
          <p style="line-height: 3;">规格:&nbsp;&nbsp;{{consultObj.name}}</p>
          <el-input v-model="consultObj.consultNum" placeholder="请输入咨询的数量，最多输入4位" maxlength="4" @change="consultInput"></el-input>
          <p class="color-red" v-show="errorObj.status">{{errorObj.text}}</p>
        </div>
        <div slot="footer" class="dialog-footer">
          <el-button size="medium" @click="consultStockFun">直接咨询</el-button>
          <el-button size="medium" type="primary" @click="consultStockFun(1)">咨询并加入购物车</el-button>
        </div>
      </el-dialog>
      <!-- 数量输入 -->
      <el-dialog title="加入购物车数量" :visible.sync="increaseVisible" width="320px" center top="20vh">
        <el-form :model="increaseProNum" ref="ruleForm" class="demo-ruleForm" style="text-align: center;">
          <el-form-item style="margin-top: 10px;">
           <el-input-number class="input-num-self"
            @keydown.110.native.prevent=""
            v-model="increaseProNum.count"
            :min="1"
            :max="increaseProNumMax"
            :step="step"
            ref="doubleInput"
            @change="handleProNum(step, 'doubleInput')"
            ></el-input-number>
            <p class="color-red" v-show="errorObj.status">{{errorObj.text}}</p>
          </el-form-item>
          <p v-if="lefProNumVisi">剩余数量{{increaseProNumMax}}</p>
          <el-button type="primary" size="medium" :disabled="addDisabled" class="btn-add-to-shop" @click="addToShop">确定</el-button>
        </el-form>
      </el-dialog>
    </div>
  </div>
</template>
<script>
  import { addressForAll } from '@/tool/address'
  import { stock, prefixImg } from '@/tool/index'
  import { getCookie } from '@/config/mUntils'
  import { offset } from '@/tool/tool'
  import { getProDetail, getProSpecList, getUnloginProSpecList, consultStock, recommendList, changeProNumber, getpmtProductList, changeSomeProNumber } from '@/service/get-data'
  import { Dialog, Form, FormItem, Button, Input, Col, Row, Tabs, Cascader, TabPane, Table, TableColumn, Pagination, InputNumber, Alert, Popover } from 'element-ui'
  import { product, tab, ActiveProduct } from '@/components/index'
  import { mapState, mapActions } from 'vuex'
  import { eventBus } from '@/tool/events-bus'
  import _ from 'lodash'
  export default {
    components: {
      elDialog: Dialog,
      elForm: Form,
      elFormItem: FormItem,
      elButton: Button,
      elInput: Input,
      elCol: Col,
      elRow: Row,
      elTabs: Tabs,
      elCascader: Cascader,
      elTabPane: TabPane,
      elTable: Table,
      elTableColumn: TableColumn,
      elPagination: Pagination,
      elInputNumber: InputNumber,
      elPopover: Popover,
      elAlert: Alert,
      product,
      tab,
      ActiveProduct
    },
    data () {
      return {
        loadImg: require('../../images/newload.png'),
        // buyNum: 0,
        // numInputBool: true,
        disabled_shop: false,
        popoverBool: false, // 已选清单是否弹出
        temporaryCart: {}, // 临时已选规格列表
        sigleObj: {}, // 只有一个规格,放置规格信息
        activeIndex: 0,
        currentImg: '', // 当前大图的地址
        citys: addressForAll, // 省市二级联动数据
        props: {  // 三级联动建名配置
          value: 'value',
          label: 'label',
          children: 'children'
        },
        search: false,
        skuDetail: {}, // 商品详情页
        recommendList: [], // 推荐的产品列表
        loading: true, // 加载数据loading图
        consultVisible: false, // 咨询库存模块
        consultVisibleInner: false, // 咨询内部的弹窗
        consultObj: {
          id: '', // 货品的id
          name: '', // 规格的名称
          consultNum: '' // 咨询弹窗中 输入咨询的数量
        },
        consultdata: '', // 询货结果 null 询货中
        errorObj: { // 错误信息
          text: '请输入正确的数量,最多输入4位',
          status: false
        },
        increaseVisible: false,
        increaseProNumMax: 9999, // 加入购物车弹窗最大值
        increaseProNum: {
          proId: '', // 货品的id
          count: 0 // 添加货品的数量
        },
        totalpage: 0, // 没有关键词情况下的总页数(最大总页数,用于搜索框是否显示的条件判断，没有关键词搜索的情况下更新)
        proSpecList: {
          list: [],
          page: {
            pageIndex: 1,
            pageSize: 10,
            totalPages: 1,
            totalRecords: 0
          }
        }, // 规格列表
        searchPro: {
          name: '', // 获取规格列表的name值
          page: 1, // 获取规格列表的page值
          number: 10 // 获取规格列表的number值
        },
        zoomVisiable: false,
        speVisi: true, // 规格
        shopcartId: '', // 购物车id
        imageList: [],
        addDisabled: false, // 能否加入购物车
        activityList: [],
        count: '',
        activityId: '',
        lefProNumVisi: false, // 剩余的数量
        consultStep: '',
        step: ''
      }
    },
    computed: {
      ...mapState({
        nowDiscount: state => state.user.discount,
        limitArr: state => state.shopcart.limitArr
      }),
      isActive () {
        let res = this.proSpecList.list.some((item, index) => {
          return item.activityId - 0 > 0
        })
        return res
      },
      // 临时已选列表展示用
      temporaryCartArr () {
        let arr = []
        for (let i in this.temporaryCart) {
          if (this.temporaryCart[i].num === 0) continue
          let item = {id: i, num: this.temporaryCart[i].num, name: this.temporaryCart[i].name}
          arr.push(item)
        }
        return arr
      },
      // 临时已选列表展示用统计数据
      temporaryCartSum () {
        function accAdd (arg1, arg2) {
          let r1
          let r2
          let m
          try {
            r1 = arg1.toString().split('s.')[1].length
          } catch (e) {
            r1 = 0
          }
          try {
            r2 = arg2.toString().split('.')[1].length
          } catch (e) {
            r2 = 0
          }
          m = Math.pow(10, Math.max(r1, r2))
          return (arg1 * m + arg2 * m) / m
        }
        function accMul (arg1, arg2) {
          let m = 0
          let s1 = arg1.toString()
          let s2 = arg2.toString()
          try {
            m += s1.split('.')[1].length
          } catch (e) {}
          try {
            m += s2.split('.')[1].length
          } catch (e) {}
          return Number(s1.replace('.', '')) * Number(s2.replace('.', '')) / Math.pow(10, m)
        }
        let sum = 0
        let price = 0
        for (let i in this.temporaryCart) {
          if (this.temporaryCart[i].num !== 0) {
            sum += this.temporaryCart[i].num
            price = accAdd(price, accMul(this.temporaryCart[i].num, this.temporaryCart[i].price))
          }
        }
        return {sum, price}
      },
      // 本商品的id
      goodsId () {
        return this.$route.params.commodityID
      },
      // 商品规格0 代表空 列表 1 代表只有一个规格 2代表多条列表
      isOneType () {
        let result
        if (this.search || Number(this.searchPro.page) > 1) return 2
        if (this.proSpecList.list) {
          result = this.proSpecList.list.length > 1 ? 2 : this.proSpecList.list.length
        }
        if (result === 1) {
          this.proSpecList.list.map((item, index) => {
            if (index === 0) {
              this.increaseProNum.proId = item.id
            }
          })
        }
        return result
      },
      stock () {
        return stock
      },
      prefixImg () {
        return prefixImg
      },
      Token () {
        return getCookie('Token')
      },
      Exam () {
        return parseInt(getCookie('Exam'))
      },
      loginStatus () {
        return this.$store.getters.loginStatus
      },
      // 购物车列表
      cartList () {
        let arr = this.$store.state.shopcart.cartlist[0]['productList']
        return arr
      }
    },
    methods: {
      ...mapActions(['fetchCartList', 'fetchDiscountActivity']),
      // 用户是否登录或认证通过
      authUserMethod () {
        if (!this.Token) {
          this.$confirm('此操作需要登录,是否前去登录', '提示').then(() => {
            this.$router.push({name: 'Login', query: { redirect: this.$route.fullPath }})
          }).catch(() => {
            // console.log('不去')
          })
          return false
        } else if (this.Exam === 3) {
          this.$store.commit('EXAMNODO', true)
          return false
        } else if (this.Exam === 2) {
          this.$store.commit('EXAMFAIL', true)
          return false
        } else if (this.Exam === 0) {
          this.$message.error('您的企业信息还在审核中,商品不能加入购物车,我们尽快给您审核.')
          return false
        } else {
          return true
        }
      },
      // 返回
      back () {
        this.$router.push({name: 'ProductList'})
      },
      // 轮播图
      handleThumb (event, img, index) {
        this.activeIndex = index
        // let imgurl = img.replace(/_s.(jpg|png|gif|jpeg)/i, '.')
        let imgurl = img
        this.currentImg = imgurl
      },
      // 单个规格
      oneAddToShop (obj, disabled) {
        if (disabled) return
        let result = this.authUserMethod()
        if (!result) {
          // console.log('用户还没有权限')
          return
        }
        let status = obj.inventoryStatus
        if (status === 3) {
          this.$message.error({
            message: '此商品缺货不能加入购物车'
          })
          return
        }
        this.addToShop()
      },
      // 批量加入
      async allAddToShop () {
        let result = this.authUserMethod()
        if (!result) {
          // console.log('用户还没有权限')
          return
        }
        let str = ''
        for (let i in this.temporaryCart) {
          if (this.temporaryCart[i].num !== 0) {
            str += `[${i}:${this.temporaryCart[i].num}:0],`
          }
        }
        if (!str) return
        let res = await changeSomeProNumber(str)
        if (res.data.resultCode && res.data.resultCode === 2000) {
          this.fetchCartList() // 更新购物车列表
          eventBus.$emit('show:pop')
          this.proSpecList.list = this.proSpecList.list.map(function (item) {
            item.buyNum = 0
            return item
          })
          for (let i in this.temporaryCart) {
            this.temporaryCart[i].num = 0
          }
        } else {
          this.$message.error(res.data.resultMsg || '网络错误')
        }
      },
      // 删除临时已选列表
      delTemporaryCart (id) {
        this.temporaryCart[id].num = 0
      },
      // 批量直接生成订单(暂不可用)
      allAddToOrder () {
        console.log('order')
      },
      // 商品详情
      async fetchProDetail () {
        // let loadingPro = this.$loading({target: '.pro-loading'})
        let res = await getProDetail(this.goodsId)
        // res = res.data
        if (res.data.resultCode && res.data.resultCode === 2000) {
          // loadingPro.close()
          this.skuDetail = res.data.data
          if (this.skuDetail.imageList.length > 0) {
            this.currentImg = this.skuDetail.imageList[0]['image']
          }
        } else {
          // loadingPro.close()
          this.$message({message: '请求出错啦'}) // 提示框
        }
      },
      // 货品规格列表
      async fetchProSpecList () {
        // let warehouseId = getStore('warehouseId')
        let res = await getProSpecList(this.goodsId, this.searchPro.page, this.searchPro.number, this.searchPro.name)
        res = res.data
        if (res.resultCode && res.resultCode === 2000) {
          this.temporaryCart = {}
          let len = res.data.list.length
          if (len === 1) {
            this.sigleObj = res.data.list[0]
            this.increaseProNum.count = this.sigleObj.packingNum * 1
          }
          for (let i in res.data.list) {
            res.data.list[i].buyNum = 0
            let id = res.data.list[i].id
            if (!this.temporaryCart.hasOwnProperty(id)) {
              this.temporaryCart[id] = {}
              this.temporaryCart[id].num = 0 // 在临时已选规格列表中加入一条
              this.temporaryCart[id].name = res.data.list[i].detail
              // TODO: 活动价格 满享活动不能使用折扣价
              if (res.data.list[i].activityId !== 0 && res.data.list[i].discountPrice !== -1) { // 正常价
                this.temporaryCart[id].price = res.data.list[i].discountPrice
              } else { // 活动价
                this.temporaryCart[id].price = res.data.list[i].price
              }
              // this.temporaryCart[id].price = res.data.list[i].price
            }
            if (res.data.list[i].stockLimit) {
              res.data.list[i].maxNum = res.data.list[i].stock
            } else {
              res.data.list[i].maxNum = 9999
            }
          }
          this.proSpecList = res.data
          if (this.searchPro.name === '') { // 没有关键词情况下的总页数(最大总页数)
            this.totalpage = this.proSpecList.page.totalPages
          }
        } else {
          this.$message({
            message: '未获取规格列表'
          })
        }
      },
      // 未登录货品规格列表
      async fetchUNloginProSpecList () {
        // let loadingSpec = this.$loading({target: '.commodity-desc'})
        let res = await getUnloginProSpecList(this.goodsId, this.searchPro.page, this.searchPro.number, this.searchPro.name)
        res = res.data
        if (res.resultCode && res.resultCode === 2000) {
          this.temporaryCart = {}
          for (let i in res.data.list) {
            res.data.list[i].buyNum = 0
            let id = res.data.list[i].id
            if (!this.temporaryCart.hasOwnProperty(id)) {
              this.temporaryCart[id] = {}
              this.temporaryCart[id].num = 0 // 在临时已选规格列表中加入一条
              this.temporaryCart[id].name = res.data.list[i].detail
              // TODO: 活动价格 满享活动不能使用折扣价
              if (res.data.list[i].activityId !== 0 && res.data.list[i].discountPrice !== -1) { // 正常价
                this.temporaryCart[id].price = res.data.list[i].discountPrice
              } else { // 活动价
                this.temporaryCart[id].price = res.data.list[i].price
              }
            }
            if (res.data.list[i].stockLimit) {
              res.data.list[i].maxNum = res.data.list[i].stock
            } else {
              res.data.list[i].maxNum = 9999
            }
          }
          let len = res.data.list.length
          if (len <= 1) {
            this.sigleObj = res.data.list[0]
          }
          this.proSpecList = res.data
        } else {
          this.$message({
            message: '未获取规格列表'
          })
        }
      },
      // 判断是否登录获取规格列表
      isLoginGetProlist () {
        if (!this.Token) {
          this.fetchUNloginProSpecList()
        } else {
          this.fetchProSpecList()
        }
      },
       // 特惠产品
      async fetchActivityList () {
        let sigle = this.sigleObj && this.sigleObj.id
        let res = await getpmtProductList('', '', sigle || '')
        let _arr = []
        if (res.data.resultCode && res.data.resultCode === 2000) {
          _arr = res.data.data
          this.activityList = _arr.slice(0, 4)
        } else {
          this.$message.error({
            message: res.data.resultMsg
          })
        }
      },
      // 推荐产品列表
      async fetchRecommendList () {
        // let loadingRecommd = this.$loading({target: '.commodity-content'})
        let res = await recommendList(3, this.goodsId)
        res = res.data
        if (res.resultCode && res.resultCode === 2000) {
          this.recommendList = res.data
          // loadingRecommd.close() // 加载隐藏
        } else {
         // loadingRecommd.close() // 加载隐藏
          this.$message({message: res.resultMsg}) // 提示框
        }
      },
      // 咨询弹窗按钮 type 0 仅咨询 1 咨询并加入购物车
      async consultStockFun (type = 0) {
        let num = this.consultObj.consultNum
        let reg = /^\d{1,5}$/
        let result
        if (reg.test(num) && num !== 0) {
          this.errorObj.status = false
          this.errorObj.text = ''
          let res = await consultStock(this.consultObj.id, this.consultObj.consultNum)
          res = res.data
          if (res.resultCode && res.resultCode === 2000) {
            result = res.data
            if (type === 1 && result !== 0) {
              this.increaseProNum.count = num
              this.addToShop() // 加入购物车
            }
            this.isLoginGetProlist() // 规格列表重新请求
            this.showConsultText(type, result)
            this.consultVisibleInner = true
          }
        } else {
          this.errorObj.text = '请输入正确的数量,最多输入4位'
          this.errorObj.status = true
        }
      },
      // 咨询库存状态 文字显示
      showConsultText (type, result) {
        if (type === 1) {
          switch (result) {
            case 0: this.consultdata = '商品缺货,无法加入购物车'; break
            case 1: this.consultdata = '商品库存紧张,加入购物车后请尽快下单'; break
            case 2: this.consultdata = '商品库存正常,已成功加入购物车'; break
            case 3: this.consultdata = '商品库存充足,已成功加入购物车'; break
            default: this.consultdata = '商品库存正在咨询中,请到购物车查看库存库存状态'; break
          }
        } else {
          switch (result) {
            case 0: this.consultdata = '商品缺货'; break
            case 1: this.consultdata = '商品库存紧张'; break
            case 2: this.consultdata = '商品库存正常'; break
            case 3: this.consultdata = '商品库存充足'; break
            default: this.consultdata = '系统正在查询，您可以先浏览其他商品。'; break
          }
        }
      },
      // 购物车填写数字
      handleProNum (step = 5, refname) {
        let leftNum = this.increaseProNum.count
        let lastNum = leftNum % step
        leftNum = lastNum === 0 ? leftNum : leftNum - lastNum + step
        this.increaseProNum.count = leftNum
        this.$nextTick(() => {
          this.$refs[refname].$refs.input.setCurrentValue(leftNum)
        })
      },
      // 限购购物车
      limitProNum (value, index, step, objitem) {
        this.temporaryCart = {...this.temporaryCart} // 强制vue监听变化
        this.debounceLimitProNum(value, index, step, objitem)
      },
      // 加入购物车 改变货品的数量
      async addToShop () {
        let result = this.authUserMethod()
        if (!result) {
          // console.log('用户还没有权限')
          return
        }
        this.addDisabled = true
        let number = parseInt(this.increaseProNum.count)
        if (!number) return
        if (number > 0 && number < 9999) {
          this.shopcartId = this.$store.state.shopcart.shopCartId
          if (!this.shopcartId) { // 如果不存在id 请求购物车
            this.fetchCartList()
            this.shopcartId = this.$store.state.shopcart.shopCartId
          }
          let res = await changeProNumber(this.shopcartId, this.increaseProNum.proId, '', number, 0)
          if (res.data.resultCode && res.data.resultCode === 2000) {
            this.errorObj.status = false
            this.errorObj.text = ''
            this.fetchCartList() // 更新购物车列表
            this.increaseVisible = false // 隐藏数量弹窗
            this.increaseProNum.count = 0
            // this.$message({message: '已经添加货品的数量到购物车'})
            this.addDisabled = false
            eventBus.$emit('show:pop')
          } else {
            this.$message.error({
              message: res.data.resultMsg
            })
          }
        } else {
          this.addDisabled = false
          this.errorObj.status = true
          this.errorObj.text = '输入数量在0~9999范围内'
        }
        this.lefProNumVisi = false
      },
      // 规格搜索
      serchPro () {
        this.search = true // 经过搜索动作得出的列表
        this.searchPro.page = 1
        this.isLoginGetProlist()
      },
      // 规格页码选择
      page (currentPage) {
        this.searchPro.page = currentPage
        this.isLoginGetProlist()
      },
      showConsult (obj) {
        let result = this.authUserMethod()
        if (!result) {
          // console.log('用户还没有权限')
          return false
        }
        this.consultVisible = true
        this.consultStep = obj.packingNum
        this.consultObj.name = obj.detail
        this.consultObj.id = obj.id
        this.increaseProNum.proId = obj.id
      },
      consultInput () {
        let step = this.consultStep
        let leftNum = this.consultObj.consultNum
        let lastNum = leftNum % step
        this.consultObj.consultNum = lastNum === 0 ? leftNum : leftNum - lastNum + step
      },
      // 隐藏弹窗
      hiddenDialog () {
        this.consultObj.consultNum = '' // 询货数量清空
        this.consultVisible = false
        this.consultVisibleInner = false
      },
      out () {
        this.zoomVisiable = false
      },
      move (ev) {
        this.init()
        const scrollX = document.documentElement.scrollLeft || document.body.scrollLeft
        const scrollY = document.documentElement.scrollTop || document.body.scrollTop
        let moveX = ev.clientX + scrollX
        let moveY = ev.clientY + scrollY
        let offsetLeft = offset(this.oPreviewBox).left
        let offsetTop = offset(this.oPreviewBox).top
        let left = moveX - offsetLeft - this.houverWidth / 2
        let top = moveY - offsetTop - this.houverHeight / 2
        let maxWidth = this.pWidth - this.houverWidth
        let maxHeight = this.pWidth - this.houverHeight
        left = left < 0 ? 0 : left > maxWidth ? maxWidth : left
        top = top < 0 ? 0 : top > maxHeight ? maxHeight : top
        let percentX = left / (maxWidth)
        let percentY = top / (maxHeight)
        this.oHoverBox.style.left = left + 'px'
        this.oHoverBox.style.top = top + 'px'
        this.oBigImg.style.left = percentX * (this.bWidth - this.imgWidth) + 'px'
        this.oBigImg.style.top = percentY * (this.bHeight - this.imgHeight) + 'px'
        this.$emit('move', ev)
        this.zoomVisiable = true
      },
      init () {
        this.oHoverBox = this.$refs.hoverBox
        this.oPreviewBox = this.$refs.previewBox
        this.oBigImg = this.$refs.bigImg
        this.imgBox = this.$refs.zoomBox
        this.houverWidth = this.oHoverBox.offsetWidth
        this.houverHeight = this.oHoverBox.offsetHeight
        this.pWidth = this.oPreviewBox.offsetWidth
        this.pHeight = this.oPreviewBox.offsetHeight
        this.imgWidth = this.oBigImg.offsetWidth
        this.imgHeight = this.oBigImg.offsetHeight
        this.bWidth = this.imgBox.offsetWidth
        this.bHeight = this.imgBox.offsetHeight
      },
      checkIE () {
        return '-ms-scroll-limit' in document.documentElement.style && '-ms-ime-align' in document.documentElement.style
      }
    },
    created () {
      this.debounceLimitProNum = _.debounce(function (value, index, step, objitem) {
        let result = this.authUserMethod()
        if (!result) {
          // console.log('用户还没有权限')
          return
        }
        if (value === 0) return
        let surplusNum // 去掉购物车数量的剩余可购买数量
        let shopcatNum = 0
        // 如果不存在id请求购物车
        if (!this.shopcartId) {
          this.fetchCartList()
          this.shopcartId = this.$store.state.shopcart.shopCartId
        }
        let lastNum = value % step
        let leftNum = lastNum === 0 ? value : value - lastNum + step
        if (lastNum !== 0) {
          this.$message(`您当前选择的商品是${step}件一起采购哦`)
          // this.temporaryCart[objitem.id].num = leftNum // 加入临时已选规格
          // return
        }
        // 个人限购 商品不限购
        if (objitem.personalLimited) {
          console.log(11)
          this.limitArr.map((limitItm, limitInd) => {
            if (objitem.id === limitItm.pid) {
              shopcatNum = limitItm.num
            }
          })
          surplusNum = objitem.lastPersonalLimitNum - shopcatNum
          // 购物存货和限购数量一样 或 个人限购剩余数量为0
          if (surplusNum === 0 || objitem.lastPersonalLimitNum === 0) {
            this.$nextTick(() => {
              // this.numList[skuIndex] = 0
              // this.$refs[`pro_${skuIndex}`][0].setCurrentValue(0)
              this.temporaryCart[objitem.id].num = 0
              this.$refs[`pro_${index}`].setCurrentValue(0)
            })
            this.$message(`抱歉,此商品限购期间每人限购${objitem.personalLimitNum}件,您已达此商品的添加上限`)
          // 输入数量大于可购数量
          } else if (surplusNum > 0 && leftNum > surplusNum) {
            if (objitem.stockLimit && surplusNum > objitem.stock) {
              this.$nextTick(() => {
                // this.numList[skuIndex] = objitem.stock
                // this.$refs[`pro_${skuIndex}`][0].setCurrentValue(objitem.stock)
                this.temporaryCart[objitem.id].num = objitem.stock
                this.$refs[`pro_${index}`].setCurrentValue(objitem.stock)
              })
              this.$message(`您的选购数量已达库存数量`)
              return
            } else {
              console.log(`left${surplusNum}`)
              this.$nextTick(() => {
                // this.numList[skuIndex] = surplusNum
                // this.$refs[`pro_${skuIndex}`][0].setCurrentValue(surplusNum)
                this.temporaryCart[objitem.id].num = surplusNum
                this.$refs[`pro_${index}`].setCurrentValue(surplusNum)
              })
              this.$message('您的选购数量已达上限')
              return
            }
          }
        }
        // 商品限购
        if (objitem.stockLimit && leftNum > objitem.stock) {
          this.$message('您的选购数量已达库存数量')
          this.$nextTick(() => {
            // this.numList[skuIndex] = objitem.stock
            // this.$refs[`pro_${skuIndex}`][0].setCurrentValue(objitem.stock)
            this.temporaryCart[objitem.id].num = objitem.stock
            this.$refs[`pro_${index}`].setCurrentValue(objitem.stock)
          })
          leftNum = objitem.stock
        } else {
          this.$nextTick(() => {
            // this.numList[skuIndex] = leftNum
            // this.$refs[`pro_${skuIndex}`][0].setCurrentValue(leftNum)
            this.temporaryCart[objitem.id].num = leftNum
            this.$refs[`pro_${index}`].setCurrentValue(leftNum)
          })
        }
        // if (!objitem.stockLimit) return
        // // 是否超过库存
        // if (leftNum > objitem.stock) {
        //   this.$message('您的选购数量已达库存数量')
        //   this.$nextTick(() => {
        //     this.$refs[`pro_${index}`].setCurrentValue(objitem.stock)
        //   })
        //   this.disabled_shop = true
        //   return
        // }
        // if (leftNum === objitem.stock) {
        //   this.$message(`商品库存数量${objitem.stock}`)
        // }
        // // 循环 购物车是否有限购的商品
        // if (objitem.personalLimited && objitem.lastPersonalLimitNum > 0) {
        //   this.limitArr.map((limitItm, limitInd) => {
        //     if (objitem.id === limitItm.pid) {
        //       shopcatNum = limitItm.num
        //     }
        //   })
        //   surplusNum = objitem.lastPersonalLimitNum - shopcatNum
        //   console.log(`剩余库存${surplusNum}`)
        //   // 购物存货和限购数量一样
        //   if (surplusNum === 0) {
        //     this.$message(`抱歉,此商品限购期间每人限购${objitem.personalLimitNum}件,已达此商品的添加上限`)
        //     // this.increaseProNum.count = 0
        //     this.disabled_shop = true
        //     return
        //     // 还可添加
        //   } else if (surplusNum > 0 && leftNum > surplusNum) {
        //     this.$message('您的选购数量已达上限')
        //     this.$nextTick(() => {
        //       this.$refs[`pro_${index}`].setCurrentValue(surplusNum)
        //     })
        //     // this.disabled_shop = true
        //     return
        //     // 可正常加入购物车
        //   } else if (surplusNum > 0 && leftNum <= surplusNum) {
        //     this.$nextTick(() => {
        //       this.increaseProNum.count = leftNum
        //       this.$refs[`pro_${index}`].setCurrentValue(leftNum)
        //     })
        //     this.disabled_shop = false
        //     return
        //   }
        // }
        // this.disabled_shop = false
      }, 100, {leading: true, trailing: false})
    },
    mounted () {
      // IE 重新检测路由
      if (this.checkIE()) {
        const selft = this
        window.addEventListener('hashchange', function () {
          const currentPath = window.location.hash.slice(1)
          if (selft.$route.fullPath !== currentPath) {
            self.$route.push(currentPath)
          }
        }, false)
      }

      this.fetchProDetail() // 请求获取商品详情
      this.isLoginGetProlist() // 获取规格列表
      if (this.Token && this.status === 1) {
        this.fetchCartList()
      }

      this.fetchRecommendList() // 推荐产品列表
      // setTimeout(() => {
      //   this.fetchActivityList()
      // }, 1000)
    },
    watch: {
      '$route' () {
        this.fetchProDetail() // 请求获取商品详情
        this.isLoginGetProlist() // 获取规格列表
      },
      'searchPro.name': {
        handler (val) {
          // ，,。？?！!˜~、\《》<>【】[]「」{}﹛﹜|
          this.searchPro.name = val.replace(/[\uff0c|\u002c|\u3002|\uff1f|\u003f|\uff01|\u0021|\u02dc|\u007e|\u3001|\u005c|\u300a|\u300b|\u0026|\u003b|\u3010|\u3011|\u005b|\u005d|\u300c|\u300d|\u007b|\u007d|\ufe5b|\ufe5c|\u007c]/g, '')
        },
        deep: true
      }
    },
    filters: {
      parseIntType (val) {
        return parseInt(val)
      }
    }
  }
</script>
<style>
  .pro-info-right .el-input-number--mini{
    width: 100px;
  }
</style>

<style lang="scss" scoped>
  .commoditydetail-box{
    margin-bottom:65px;
  }
  .discount-box{
    margin-top: 10px;
  }
  .goods-detail-box{
    background: #ffffff;
    padding: 20px 20px 30px;
    box-shadow: 0 2px 5px 0 rgba(0,0,0,0.05)
  }
  .commodity-box-detail{
    width: 100%;
    overflow: hidden;
    p{
      color: #2A2A2A;
    }
    img{
      width: 100%;
    }
  }
  .commodity-box-detail img{
    width: 100%;
  }
  .font-blue{
     @include fontbase(#2A91D2, 14px);
  }
  .table-head-product{
    font-size: 12px;
  }
  .icon-font{
    font-weight: 600;
  }
  .kn-thumb{
    padding-top: 10px;
    overflow: hidden;
    width: 360px;
    .kn-thumb-item{
      text-align: center;
      margin-right: 10px;
      float: left;
      width: 60px;
      height: 60px;
      padding: 5px;
      box-sizing: border-box;
      img{
        width: 100%;
        height: 100%;
      }
    }
    .activeThumb{
      border:1px solid #ffcc00;
    }
  }
  .goods-stock{
    margin-bottom: 20px;
    .stock{
      color: #555555;
    }
    .tips{
      color: #b3b3b3;
      font-size: 12px;
      padding-left: 19px;
    }
  }
  .kn-large{
    position: relative;
    // width: 400px;
  }
  .tagname{
    border-color: #FFCC00;
    color: #FF7300;
    padding: 6px 16px;
    margin-right: 7px;
    border-radius: 6px;
    font-size: 13px;
    display: inline-block;
    line-height: 1;
    border: 1px solid #FF7300;
  }
  .tagname-red{
    color: #ff0f34;
    border: 1px solid #ff0f34;
  }
  .tips{
    font-size: 16px;
    color: #ff0f34;
    margin-bottom: 18px;
    }
  .resume{
    padding: 8px 0;
    font-size: 13px;
    }
  .pro-choose-main {
    position: relative;
    display: flex;
    justify-content: space-around;
    background: #ffffff;
    padding:57px 40px;
    margin-bottom: 20px;
    box-shadow: 0 2px 5px 0 rgba(0,0,0,0.05);
    .pro-img-left{
      width: 400px;
    }
    .pro-info-right{
      flex: 1;
      // width:630px;
    }
  }
  .pro-big-show{
    width: 400px;
    max-height: 400px;
  }
  .previewImg{
    width: 40px;
    height: 40px;
  }
  .pro-info-right{
    .title{
      margin-bottom: 18px;
    }
    .pro-title{
      margin-right: 10px;
      @include fontbase(#333333, 26px, 25px);
      vertical-align: middle;
    }
  }
  .discount-tags{
    position: relative;
    background-color: #ff0f34;
    color: #ffffff;
    font-size: 12px;
    margin-left: 18px;
    padding: 4px 8px;
    vertical-align: middle;
    &::before{
      position: absolute;
      content: '';
      border-top: 5px solid #ff0f34;
      border-left: 10px solid transparent;
      top: 0;
      left: -9px;
    }
  }
  .pro-price-info{
    padding: 20px 20px 26px;
    background: #FBFBFB;
    border: 1px solid #DCDCDC;
    @include fontbase(#555555, 14px);
    .first{
      margin-bottom: 8px;
    }
    p {
      &:first-child{
        font-size: 0;
      }
    }
    .s-pro-title{
      display: inline-block;
      width: 93px;
      @include fontbase(#B3B3B3, 12px);
      vertical-align: middle;
    }
    .pro-price{
      @include fontbase(#F55923, 26px);
      vertical-align:middle;
    }
    .smallfont{
      font-size: 16px;
    }
  }
  .active-pro-price{
     @include fontbase(#ff0f34, 26px);
    vertical-align:middle;
  }
  .active-oldprice{
    color: #555555;
    font-size: 16px;
    text-decoration: line-through;
  }
  .commodity-title{
      width: 98px;
      display: inline-block;
      @include fontbase(#999999, 14px);
      margin-right: 15px;
      vertical-align: middle;
  }
  .city-cascder{
    display: inline-block;
  }
  .commodity-stock{
    @include fontbase(#999999, 14px);
    line-height: 32px;
    .commodity-stock-status{
      margin-left: 73px;
      display: inline-block;
      font-size: 14px;
      .stock{
        color:#858585;
        padding-right: 9px;
      }
    }
  }
  //  计数器
  .input-num-self{
    width: 138px;
  }
  .search-div{
    width: 99%;
    box-sizing: border-box;
    position: relative;
    background: #FFFFFF;
    border: 2px solid #DCDCDC;
    border-radius: 4px;
    padding-left: 11px;
    height: 42px;
    line-height: 42px;
    font-size: 14px;
    margin-bottom: 17px;
    input{
      width: 95%;
    }
    i{
      position: absolute;
      float: right;
      @include fontbase(#666666, 22px, 1);
      right: 14px;
      top: 10px;
    }
  }
  .add-to-shop{
    @include fontbase(#444444, 12px, 20px);
    display: inline-block;
    cursor: pointer;
    padding: 8px 22px;
    background: #FFCC00;
    border-radius: 2px;
    border: 1px solid #ffcc00;
    &.is-disabled{
      background: #bbbbbb;
      color: #fbf9f9;
      border: 1px solid #bbbbbb;
    }
  }
    .redCircle{
    display: inline-block;
    height:28px;
    line-height: 28px;
    color:rgba(255,255,255,1);
    background:rgba(252,60,60,1);
    border-radius:6px;
    padding: 0 12px;
    font-size: 12px;
    margin-right: 10px;
    margin-top: 10px;
  }
  .active-tag{
    position: relative;
    overflow: initial;
    &:before{
      position: absolute;
      content: '';
      height: 77px;
      width: 20px;
      left: -4px;
      top: -45px;
      bottom: -14px;
      background: rgba(255, 15, 52, 0.8);
      /* transform: rotateX(39deg); */
      transform: rotate(52deg);
      text-align: center;
      font-size: 12px;
      color: #fff;
    }
  }
  .commodity-info{
    height:17px;
    margin-top: -20px;
    margin-bottom: 10px;
    font-size:12px;
    font-weight:400;
    color:rgba(153,153,153,1);
    line-height:17px;
  }
  .commodity-search{
    height:31px;
    margin-bottom: 10px;
    font-size:14px;
    font-weight:400;
    color:rgba(51,51,51,1);
    line-height:31px;
    overflow: hidden;
    position: relative;
    input{
      width: 120px;
      padding-left: 30px;
      padding-right: 50px;
      border: 1px solid #CBCBCB;
      height: 29px;
    }
    .el-icon-search{
      position: absolute;
      right: 177px;
      top: 7px;
      font-size: 18px;
    }
    .searchBtn{
      position: absolute;
      right: 0px;
      font-size: 12px;
      text-align: center;
      display: inline-block;
      width:49px;
      height:31px;
      background-color: #FF7600;
      color: #fff;
      cursor: pointer;
    }
  }
  .commodity-intro{
    padding:14px 0 16px 30px;
    border-top: 1px solid #DCDCDC;
    border-bottom: 1px solid #DCDCDC;
    margin-bottom: 22px;
    @include fontbase(#999999, 12px);
    .iconfont{
      padding-right: 6px;
      font-size: 14px;
      vertical-align: bottom;
    }
    .text{
      display: inline-block;
      font-size: 12px;
      padding-left: 26px;
      padding-right: 24px;
      border-right: 1px solid #ececec;
      line-height: 14px;
      &:last-child{
        border-right: none;
      }
      &:first-child{
        padding-left: 0;
      }
    }
    .sku-code{
      max-width: 125px;
      display: inline-block;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap
    }
  }

  .temporaryCart-box{
    height: 46px;
    background-color: #f9f9f9;
    border-bottom: 1px solid #e5e5e5;
    overflow: hidden;
    margin-bottom: 20px;
    .temporaryCart-total{
      line-height: 46px;
      width: 20px;
      padding-left: 30px;
    }
    .btn-temporaryCart{
      cursor: pointer;
      width: 187px;
      height: 46px;
      line-height: 46px;
      border-left: 1px solid #e5e5e5;
      float: right;
      text-align: center;
      color: #222;
    }
  }

  .btn-add-shopcart{
    width: 200px;
    color: #444444;
    height: 54px;
    margin-left: 20px;
    line-height: 54px;
    background: #ffd633;
    font-size: 16px;
    border-radius: 2px;
    display: inline-block;
    text-align: center;
    cursor: pointer;
    .iconfont{
      font-weight: 600;
    }
    &:hover{
      color: #444444;
    }
  }

  .btn-add-order{
    width: 200px;
    color: #ffffff;
    height: 54px;
    margin-left: 20px;
    line-height: 54px;
    background: #ff7600;
    font-size: 16px;
    border-radius: 2px;
    display: inline-block;
    text-align: center;
    cursor: pointer;
    .iconfont{
      font-weight: 600;
    }
    &:hover{
      color: #444444;
    }
  }

  .btn-add-shopcart-red{
    width: 300px;
    color: #ffffff;
    height: 54px;
    line-height: 54px;
    background: #ff0f34;
    font-size: 16px;
    border-radius: 2px;
    display: inline-block;
    text-align: center;
    cursor: pointer;
    .iconfont{
      font-weight: 600;
    }
    &:hover{
      opacity: .8;
    }
  }
  .btn-add-to-shop{
    width: 180px;
    margin-top: 14px;
    margin-bottom: 18px;
  }
  .btn-not-allow{
    background: #f0f0f0;
    color: #999;
  }
  .commodity-desc{
    position: relative;
    width: 950px;
    float: left;
    // padding: 20px 20px 30px;
    // background: #ffffff;
    box-sizing: border-box;
    .spe-tabs{
      padding-bottom: 11px;
      border-bottom:1px solid #ECECEC;
      margin-bottom:16px;
      font-size: 0;
      span{
        @include fontbase(#959595, 18px, 25px);
        padding: 0 3px 11px;
        cursor: pointer;
        &.active{
          color: #474747;
          border-bottom: 2px solid #E8BA07;
        }
      }
      em{
        display: inline-block;
        width: 1px;
        height:12px;
        margin:0 8px;
        background: #b8b8b8;
        vertical-align: baseline;
      }
    }
  }
  .commodity-content{
    margin-bottom: 20px;
    overflow: hidden;
    // box-shadow: 0 2px 5px 0 rgba(0,0,0,0.05);
  }
  .el-tabs__item, .aaa{
    display:inline-block
  }
  .no-text{
    color: #666;
  }
  .recomm-box{
    width: 240px;
    float: right;
    .recomm-pro{
      padding: 18px 18px 30px;
      background: #ffffff;
    }
    .recomm-pro-title{
      padding-bottom: 13px;
      border-bottom: 1px solid #ececec;
      margin-bottom: 16px;
       .title{
         @include fontbase(#474747, 18px, 25px);
        padding-bottom: 13px;
        border-bottom: 2px solid #E8BA07;
      }
    }
  }
   .content_box{
      position: relative;
      display: inline-block;
      width: calc(100% - 40px);
      padding-top: 20px;
      background: #FFFFFF;
      text-align: center;
      border-bottom:1px solid #ececec;
      &:last-child{
        border-bottom:none
      }
      .top{
        text-align: left;
      }
       .previewImg_img{
        height: 180px;
        margin: 10px 0;
      }
      .format{
        font-size: 12px;
        color: #A3A3A3;
        line-height: 2;
      }
      .title{
        font-size: 14px;
        color: #666666;
        line-height: 1.5;
      }
      .price{
        font-size: 16px;
        color: #2A2A2A;
        line-height: 2.5;
        margin-top: 2px;
      }
      .buy_box{
        position: absolute;
        width: 100%;
        left: 0;
        bottom: 0;
        height: 0;
        opacity: 0;
        padding-top: 18px;
        background: rgba(0,0,0,0.5);
        transition: all 0.2s linear;
        box-shadow: 0 15px 30px rgba(0,0,0,0.1);
        button{
          opacity: 0;
        }
      }
    }
    .btn_new, .btn_hot{
      display: inline-block;
      height: 20px;
      line-height: 20px;
      padding: 0 6px;
      border-radius: 4px;
      font-size: 10px;
      color: #FFFFFF;
      letter-spacing: 1.25px;
      margin-right: 5px;
    }
    .btn_new{
       background: #2FC5E3;
    }
    .btn_hot{
      background: #F2572F;
    }
    .yellow_shopcart{
      display: inline-block;
      vertical-align: middle;
      color: #fff;
      border-radius: 50%;
      font-size: 12px;
      line-height: 20px;
      width: 20px;
      height: 20px;
      background-image: linear-gradient(18deg, #F5A310 0%, #FFCD08 100%);
    }
    .tab_box{
    width: 100%;
    overflow: hidden;
    margin-bottom: -1px;
    position: relative;
    height: 40px;
    margin-bottom: 15px;
    &::after {
      position: absolute;
      content: "";
      left: 0;
      bottom: 0;
      width: 100%;
      height: 2px;
      background-color: #dfe4ed;
      z-index: 1;
    }
  }
  .tab_title{
      position: relative;
      display: inline-block;
      margin: 0 20px;
      height: 40px;
      box-sizing: border-box;
      @include fontbase(#2d2f33, 14px, 40px);
      font-weight: 500;
      &:nth-child(odd){
        margin-left: 0
      }
      &.is_active{
        color: #FFCC00;
        &:after{
          position: absolute;
          content: "";
          left: 0;
          bottom: 0;
          width: 100%;
          height: 2px;
          background-color: #FFCC00;
          z-index: 2;
        }
      }
    }
    .content-item-active {
      transform: translateY(-2px);
      .buy_box{
        height: 58px;
        opacity:1 ;
        button{
          opacity:1 ;
        }
      }
    }
    // -----------------
    .vue-magnify {
    position: relative;
  }
   .preview-box {
      position: relative;
      width: 360px;
      height: 360px;
      overflow: hidden;
      img {
        width: 100%;
        height: 100%;
      }
      .hover-box {
        position: absolute;
        // display: none;
        left: 0;
        top: 0;
        width: 215px;
        height: 215px;
        border: 1px solid #545454;
        background: url('https://img-tmdetail.alicdn.com/tps/i4/T12pdtXaldXXXXXXXX-2-2.png') repeat 0 0;
        cursor: move;
        user-select: none;
      }
    }
  .zoom-box {
      width: 360px;
      height: 360px;
      overflow: hidden;
      position: absolute;
      left: 400px;
      border: 1px solid #dc7a7a;;
      top: 0;
      z-index: 5;
      background: #ffffff;
      img {
        width: 800px;
        height: 800px;
        position: absolute;
        top: 0;
        left: 0;
      }
    }
    .breadcrumb {
      padding: 12px 2px;
      @include fontbase(#999999, 12px);
      .bread_a:hover{
        color: #ffcc00;
      }
    }
    .dialog-footer{
      display: flex;
      justify-content: center;
      .btn-consult{
        font-size: 12px;
        line-height: 15px;
        padding: 8px 20px;
      }
    }
  .not_allow{
    cursor: not-allowed;
  }
  .oldprice{
    display: inline-block;
    padding-left:4px;
    color: #666666;
    font-size: 14px;
    text-decoration: line-through;
  }
  .pmtprice{
    font-size: 14px;
    color:#ff0f34;
  }
</style>
<style lang="scss">
  .product-detail >.el-input--mini > {
      .el-input__inner{
        padding-left: 29px!important;
        padding-right: 29px!important;
      }
  }
  .el-input-number__decrease, .el-input-number__increase{
    background: #ffffff;
  }

  .el-dialog--center .el-dialog__body {
    text-align: initial;
    padding: 0px 27px 20px;
  }
  .font12{
    font-size: 12px;
  }
  .el-table .cell{
    overflow: initial;
  }

  .el-table th.gutter{
    display: table-cell!important;
  }
</style>

